<template>
  <div>
    <van-collapse
      v-model="activeCourseId"
      accordion
      class="course-box"
    >
      <van-collapse-item
        v-for="item in courseList"
        :key="item.Id"
        :title="item.Name"
        :name="item.Id"
        class="course-c-item"
      >
        <div
          v-if="item.Items.length === 0"
          class="tips-none"
        >
          暂时没有视频~
        </div>
        <div v-else>
          <div
            v-for="video in item.Items"
            :key="video.ChapterId"
            class="section-item"
            @click="onChangeVideo(item, video)"
          >
            <div class="section-name">
              {{ video.ChapterName }}
            </div>
          </div>
        </div>
      </van-collapse-item>
    </van-collapse>
    <NoData v-if="courseList.length === 0">
      暂时没有课程~
    </NoData>
  </div>
</template>
<script lang="ts">
import Vue from 'vue'
import { Dictionary } from 'vue-router/types/router'
export default Vue.extend({
  components: {
    NoData: () => import('components/Class/NoData.vue'),
  },
  // eslint-disable-next-line vue/require-default-prop
  // eslint-disable-next-line vue/require-prop-types
  props: ['courseList'],
  data () {
    return {
      activeCourseId: '',
      activeIndex: 0,
    }
  },
  watch: {
    courseList: {
      handler (newVal, oldVal) {
        if (newVal.length > 0) {
          this.activeCourseId = newVal[0].Id
        }
      },
      deep: true,
    },
  },
  created () {
    if (this.courseList.length > 0) {
      this.activeCourseId = this.courseList[0].Id
    }
  },
  methods: {
    // 切换小节进入录播
    onChangeVideo (course: any, video: any) {
      console.log(course, video)
      if (!video || video.VideoLibId === '') {
        return
      }
      this.$router.push({
        name: 'freeDetail',
        query: {
          courseId: course.Id,
          title: course.Name,
          courseImg: course.ShowCoverUrl,
          activeVideoId: video.ChapterId,
          activeVideoName: video.VideoLibName,
          packageId: this.$route.query.packageId,
        },
      })
    },
  },
})
</script>
<style lang="scss" scoped>
.course-box {
  /deep/ {
    .van-collapse-item__content {
      padding: 0;
    }
    .van-cell__title {
      font-size: 32px;
      color: #333333;
      @include ellipsis;
    }
  }
}
.tips-none {
  text-align: center;
  color: #898989;
  font-size: 30px;
  padding: 30px;
  background: #F6F6F6;
}
.chapter-box {
  &.van-hairline--top-bottom:after {
    border-width: 0;
  }
  /deep/ {
    .van-collapse-item__content {
      font-size: 28px;
      color: #333333;
      // padding: 20px 24px 20px 72px;
      padding: 20px 0;
      background-color: #F6F6F6;
    }
    .van-cell {
      background-color: #F6F6F6;
    }
    .van-cell__title {
      font-size: 30px;
      color: #666666;
      @include ellipsis;
    }
  }
}
.section-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 87px;
  line-height: 87px;
  // margin-bottom: 10px;
  background-color: #f0f0f0;
  padding: 0 24px 0 40px;
  &:last-child {
    margin-bottom: 0;
  }
}
.current-section-item {
  background-color: #f0f0f0;
}
.section-name {
  color: #333;
  // width: calc(100% - 100px);
  @include ellipsis;
}
.section-state,.section-btn {
  width: 130px;
  height: 44px;
  line-height: 45px;
  color: #333333;
  font-size: 24px;
  text-align: center;
  border-radius: 3px;
  @include px1border(all, #A4A9B2);
  // border: 1px solid #A4A9B2;
}
.section-btn {
  width: 130px;
  color: #03C9BB;
  @include px1border(all, #03C9BB);
  // border: 1px solid #03C9BB;
}
</style>
